<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验页面</title>
    <link rel="stylesheet" href="{% static 'bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/generic.css' %}">
    <script src="{% static 'js/jquery-3.7.1.js' %}"></script>
    <script src="{% static 'js/chart.js' %}"></script>
    <script src="{% static 'bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'js/update_report.js' %}"></script>
</head>
<body>
    <div class="container mt-4">
        <div class="card mb-4">
            <div class="card-header text-center mb-4 d-flex justify-content-between align-items-center">
                实验进度
                <a href="/operate/fruit_page/" class="btn btn-warning" target="_blank">弹出页面</a>
            </div>
            <div class="card-body">
                <!-- 动态进度条区域 -->
                <div id="progress-section" class="mb-4">
                    <!-- 进度条通过JS动态生成 -->
                </div>
                <div id="completed-text" class="mb-3 text-success fw-bold"></div>
            </div>
        </div>

        <!-- 回测折线图 -->
        <div class="card mb-4">
            <div class="card-header">回测折线图</div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="backtest-chart"></canvas>
                </div>
                <div class="chart-container">
                    <canvas id="pos-chart"></canvas>
                </div>
            </div>
        </div>

        <!-- 交易详情 -->
        <div class="card mb-4">
            <div class="card-header">交易详情</div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="holding-chart"></canvas>
                </div>
                <div class="chart-container">
                    <canvas id="profit-chart"></canvas>
                </div>
            </div>
        </div>

        <!-- 回测指标表 -->
        <div class="card mb-4">
            <div class="card-header">回测指标表</div>
            <div class="card-body">
                <table class="table table-bordered text-center">
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>值</th>
                            <th>备注</th>
                        </tr>
                    </thead>
                    <tbody id="metrics-table">
                        <!-- 表格内容通过JS动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 回测总结 -->
        <div class="card mb-4">
            <div class="card-header">回测总结</div>
            <div class="card-body">
                <p id="introduce1-text">最新的策略卡包及更多金融数据请点击<a href="https://gitee.com/benhe256/ddquant-x/blob/master/README.md" target="_blank">【社群】</a>获取。</p>
                <p id="summary-text">加载中...</p>
                <p id="introduce2-text">如您对量化交易的全流程解决方案感兴趣，请点击<a href="https://gitee.com/benhe256/ddquant_v4/blob/master/README.md" target="_blank">【专业量化交易】</a>。感谢使用！</p>
            </div>
        </div>
    </div>
</body>
</html>


